<template>
  <div class="index dis-f jc-sb">
    <div class="w-590">
      <con-box class="h-450" title="进货不良率">
        <base-echarts :options="jhOptions" />
      </con-box>
      <con-box class="h-450 mt-10" title="客诉件数/客诉率">
        <div class="consumer-con">
          <div class="top">
            <base-echarts :options="customerComplaintOptions" />
          </div>
          <div class="bottom">
            <div class="title">客诉占比前三项</div>
            <div class="table p-20">
              <div class="th fz-14 c-BDE1FF dis-f jc-sb h-30 ai-c ta-c mb-4">
                <div class="td w-80">序号</div>
                <div class="td flex-1">名称</div>
                <div class="td w-110">数量</div>
                <div class="td w-110">占比</div>
              </div>
              <base-seamless-scroll>
                <div class="list-con">
                  <div v-for="(item, index) in complaintList" :key="index" class="tr dis-f jc-sb ai-c mb-4">
                    <div class="w-80 td">
                      <span class="w-20 h-20 dis-f ai-c jc-c fz-14 m-0-auto c-FF7F0E no-num">{{ index + 1 }}</span>
                    </div>
                    <div class="flex-1 td fz-14 c-fff ta-c">{{ item.name }}</div>
                    <div class="ta-c td fz-14 w-110 ta-c">{{ item.num }}</div>
                    <div class="ta-c td fz-14 w-110 ta-c">{{ item.percent }}</div>
                  </div>
                </div>
              </base-seamless-scroll>
            </div>
          </div>
        </div>
      </con-box>
    </div>
    <div class="w-590">
      <con-box class="h-450" title="工艺符合率">
        <base-echarts :options="gyOptions" />
        <base-select slot="header" v-model="gySelected" :list="selectList" :disabled="true" />
      </con-box>
      <con-box class="h-450 mt-10" title="直通率">
        <div class="quality-management">
          <div class="percentage">
            <div class="value">
              <img src="@/assets/images/aqsc_icon_fqclzb.png" alt="" class="rotate" />
              <span>{{ throughRate | toNumber }}</span>
              <span class="unit">%</span>
            </div>
            <title-item title="直通率" />
          </div>
          <data-list :list="qualityList" />
        </div>
      </con-box>
    </div>

    <div class="w-500">
      <con-box class="h-450" title="市场产品核验得分/评级">
        <div class="pt-20 table p-20">
          <div class="th fz-14 c-BDE1FF dis-f jc-sb h-48 ai-c ta-c mb-4">
            <div class="td w-80">序号</div>
            <div class="td flex-1">抽检产品</div>
            <div class="td w-110">综合评分</div>
            <div class="td w-110">综合评级</div>
          </div>
          <base-seamless-scroll>
            <div class="list-con">
              <div v-for="(item, index) in marketGradeList" :key="index" class="tr dis-f jc-sb h-48 ai-c mb-4">
                <div class="w-80 td">
                  <span class="w-20 h-20 dis-f ai-c jc-c fz-14 m-0-auto c-FF7F0E no-num">{{ index + 1 }}</span>
                </div>
                <div class="flex-1 td fz-14 c-fff ta-c">{{ item.productName }}</div>
                <div class="ta-c td fz-14 w-110 ta-c">{{ item.score }}</div>
                <div class="ta-c td fz-14 w-110 ta-c">{{ item.grade }}</div>
              </div>
            </div>
          </base-seamless-scroll>
        </div>
      </con-box>
      <con-box class="h-450 mt-10" title="工厂品质绩效得分/评级">
        <div class="pt-20 table p-20">
          <div class="th fz-14 c-BDE1FF dis-f jc-sb h-48 ai-c ta-c mb-4">
            <div class="td w-80">序号</div>
            <div class="td flex-1">月份</div>
            <div class="td w-110">综合评分</div>
            <div class="td w-110">综合评级</div>
          </div>
          <base-seamless-scroll>
            <div class="list-con">
              <div v-for="(item, index) in factoryGraderList" :key="index" class="tr dis-f jc-sb h-48 ai-c mb-4">
                <div class="w-80 td">
                  <span class="w-20 h-20 dis-f ai-c jc-c fz-14 m-0-auto c-FF7F0E no-num">{{ index + 1 }}</span>
                </div>
                <div class="flex-1 td fz-14 c-fff ta-c">{{ item.productName }}</div>
                <div class="ta-c td fz-14 w-110 ta-c">{{ item.score }}</div>
                <div class="ta-c td fz-14 w-110 ta-c">{{ item.grade }}</div>
              </div>
            </div>
          </base-seamless-scroll>
        </div>
      </con-box>
    </div>
  </div>
</template>

<script>
// iui
const barDate = [0, 0, 0, 0];
import BaseEcharts from "@/components/BaseEcharts.vue";
import ConBox from "@/components/ConBox.vue";
import * as echarts from "echarts";
import TitleItem from "@/components/TitleItem.vue";
import DataList from "@/components/DataList.vue";
import BaseSeamlessScroll from "@/components/BaseSeamlessScroll.vue";
import OpacityBarChart from "@/components/OpacityBarChart.vue";
import { BAR_COLOR_LIST, BAR_COLOR_LIST_OPACITY, TOOLTIP_COMMON } from "@/assets/js/constant";
import { nowSize } from "@/utils/nowSize";
import BaseSelect from "@/components/BaseSelect.vue";
import mixins from "@/mixins/refresh";
import {
  qualitySgrade,
  qualitFgrade,
  qualityThrough,
  qualityComplaint,
  qualityQrate,
  qualityConformrate,
} from "@/api/apis.js";
import { getSevenDays, getRangeRandom, getRangeRandomFloor } from "@/utils/tools";

export default {
  name: "index",
  mixins: [mixins],
  components: {
    ConBox,
    TitleItem,
    DataList,
    BaseEcharts,
    OpacityBarChart,
    BaseSeamlessScroll,
    BaseSelect,
  },
  watch: {
    gySelected(newV, oldV) {
      if (newV === oldV) return;
      const label = this.selectList.find((item) => item.value === newV).label;
      this.qualityConformrate(label, newV);
    },
  },
  data() {
    return {
      query: {
        factoryName: this.$route.query.factoryName,
      },
      ksSelected: "month",
      gySelected: "recordDate",
      ksSelectList: [
        { label: "年", value: "year" },
        { label: "本月", value: "month" },
        { label: "日", value: "recordDate" },
      ],
      selectList: [
        // { label: "年", value: "year" },
        { label: "月", value: "month" },
        { label: "日", value: "recordDate" },
      ],
      // 市场产品得分等级
      marketGradeList: [],
      // 工厂产品得分等级
      factoryGraderList: [],
      // fui
      ksObj: {},
      gyOptions: {
        animation: true,
        tooltip: {
          ...TOOLTIP_COMMON,
          trigger: "axis",
          formatter: "{b} <br/>{a0} : {c0} %",
        },
        legend: {
          show: true,
          top: 0,
          icon: "rect",
          right: "30%",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
          selectedMode: false, // 是否允许点击
          data: [ "工艺符合率"],
          // data: ["车间符合工艺点数", "全部工艺点数", "工艺符合率"],
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },
        grid: {
          left: "5%",
          top: "20%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {},
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            interval: 1,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          // {
          //   type: "category",
          //   data: [],
          //   axisLine: { show: false },
          //   axisLabel: {
          //     show: false,
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   boundaryGap: true,
          // },
          // {
          //   type: "category",
          //   data: [],
          //   axisLine: { show: false },
          //   axisLabel: {
          //     show: false,
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   boundaryGap: true,
          // },
        ],
        yAxis: [
          // {
          //   type: "value",
          //   name: "单位: 数量",
          //   nameTextStyle: {
          //     color: "#A1A6AA",
          //     fontSize: nowSize(14),
          //   },
          //   axisLine: {
          //     show: false,
          //   },
          //   axisLabel: {
          //     interval: 0,
          //     textStyle: {
          //       color: "#A1A6AA",
          //       fontSize: nowSize(14),
          //     },
          //   },
          //   splitLine: {
          //     show: false,
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          // },
          {
            type: "value",
            name: "单位: %",
            max: 100,
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          // {
          //   name: "车间符合工艺点数",
          //   type: "bar",
          //   barWidth: 20,
          //   data: [],
          //   z: 1,
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(25, 224, 166, 0.2)",
          //     },
          //   },
          // },
          // {
          //   name: "全部工艺点数",
          //   type: "bar",
          //   barWidth: 20,
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(226, 154, 39, 0.2)",
          //     },
          //   },
          //   data: [],
          //   z: 1,
          // },

          // // 背景
          // {
          //   name: "",
          //   type: "bar",
          //   barWidth: 60,
          //   barGap: "-100%",
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(18, 62, 98, 0.35)",
          //     },
          //   },
          //   data: [],
          //   z: -1,
          //   xAxisIndex: 1,
          // },

          {
            name: "工艺符合率",
            type: "line",
            showAllSymbol: true,
            lineStyle: {
              color: "#4c6173",
            },
            showSymbol: true,
            symbol:
              "image://",
            symbolSize: 26,
            itemStyle: {
              normal: {
                color: "rgba(172, 213, 152, 1)",
                borderColor: "rgba(172, 213, 152, 1)",
                borderWidth: 1,
              },
            },
            data: [],
            yAxisIndex: 0,
          },

          // 顶部亮点
          // {
          //   name: "123",
          //   stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
          //   type: "bar",
          //   barWidth: 20,
          //   xAxisIndex: 2,
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
          //     },
          //   },
          //   data: [],
          // },
          // {
          //   /*这个bar是横线的显示*/
          //   name: "123",
          //   stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
          //   type: "bar",
          //   barWidth: 20,
          //   xAxisIndex: 2,
          //   itemStyle: {
          //     normal: {
          //       color: "#19e0a6",
          //     },
          //   },
          //   data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
          // },

          // {
          //   name: "123",
          //   stack: "breakevenEleGroup1" /*数据组，需要设置才能将两个bar堆积在一起*/,
          //   type: "bar",
          //   barWidth: 20,
          //   xAxisIndex: 2,
          //   itemStyle: {
          //     normal: {
          //       color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
          //     },
          //   },
          //   data: [],
          // },
          // {
          //   /*这个bar是横线的显示*/
          //   name: "123",
          //   stack: "breakevenEleGroup1" /*数据组，需要设置才能将两个bar堆积在一起*/,
          //   type: "bar",
          //   barWidth: 20,
          //   xAxisIndex: 2,
          //   itemStyle: {
          //     normal: {
          //       color: "#e29a27",
          //     },
          //   },
          //   data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
          // },
        ],
      },
      jhOptions: {
        animation: true,
        tooltip: {
          trigger: "axis",
          formatter: "{b} <br/>{a0} : {c0}<br/>{a1} : {c1}<br/> {a2} : {c2} %",
          ...TOOLTIP_COMMON,
        },
        legend: {
          show: true,
          top: 0,
          icon: "rect",
          right: "30%",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 10,
          selectedMode: false, // 是否允许点击
          data: ["原物料进货不良数", "总进货数", "进货不良率"],
          textStyle: {
            color: "#fefefe",
            fontSize: nowSize(12),
          },
        },
        grid: {
          left: "5%",
          top: "20%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["1月", "2月", "3月", "4月"],
            axisTick: {},
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(110, 130, 149, 0.30)",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                color: "#adceea",
                fontSize: nowSize(14),
              },
            },
            interval: 1,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            data: ["测试1", "测试2", "测试3", "测试4"],
            axisLine: { show: false },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
          {
            type: "category",
            data: ["测试1", "测试2", "测试3", "测试4"],
            axisLine: { show: false },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            boundaryGap: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位: 数量",
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            name: "单位: %",
            max: 100,
            nameTextStyle: {
              color: "#A1A6AA",
              fontSize: nowSize(14),
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#A1A6AA",
                fontSize: nowSize(14),
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],

        series: [
          {
            name: "原物料进货不良数",
            type: "bar",
            barWidth: 20,
            data: [],
            z: 1,
            itemStyle: {
              normal: {
                color: "rgba(255, 127, 14, 0.2)",
              },
            },
          },
          {
            name: "总进货数",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "rgba(1, 160, 246, 0.2)",
              },
            },
            data: barDate.map((item) => ({
              value: item + 5,
            })),
            z: 1,
          },

          // 背景
          {
            name: "",
            type: "bar",
            barWidth: 60,
            barGap: "-100%",
            itemStyle: {
              normal: {
                color: "rgba(18, 62, 98, 0.35)",
              },
            },
            data: barDate.map((item) => ({
              itemStyle: {
                decal: {
                  dashArrayX: [20, 0],
                  dashArrayY: [5, 2],
                  rotation: -45,
                },
              },
              value: 100,
            })),
            z: -1,
            xAxisIndex: 1,
          },

          {
            name: "进货不良率",
            type: "line",
            showAllSymbol: true,
            lineStyle: {
              color: "#4c6173",
            },
            showSymbol: true,
            symbol:
              "image://",
            symbolSize: 26,
            itemStyle: {
              normal: {
                color: "rgba(172, 213, 152, 1)",
                borderColor: "rgba(172, 213, 152, 1)",
                borderWidth: 1,
              },
            },
            data: ["30", "50", "40", "70"],
            yAxisIndex: 1,
          },

          // 顶部亮点
          {
            name: "123",
            stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 20,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
              },
            },
            data: barDate,
          },
          {
            /*这个bar是横线的显示*/
            name: "123",
            stack: "breakevenEleGroup" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 20,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "#ff7f0e",
              },
            },
            data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
          },

          {
            name: "123",
            stack: "breakevenEleGroup1" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 20,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)" /*设置bar为隐藏，撑起下面横线*/,
              },
            },
            data: barDate.map((item) => ({
              value: item + 5,
            })),
          },
          {
            /*这个bar是横线的显示*/
            name: "123",
            stack: "breakevenEleGroup1" /*数据组，需要设置才能将两个bar堆积在一起*/,
            type: "bar",
            barWidth: 20,
            xAxisIndex: 2,
            itemStyle: {
              normal: {
                color: "#01a0f6",
              },
            },
            data: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8],
          },
        ],
      },
      throughRate: "",
      complaintList: [
        { name: "异物", num: "28", percent: "26%" },
        { name: "渗漏", num: "26", percent: "24%" },
        { name: "虫害", num: "21", percent: "19%" },
      ],
      qualityList: [
        { label: "经过克重机合格个数", value: "0", unit: "个" },
        { label: "经过克重机总个数", value: "0", unit: "个" },
      ],
      customerComplaintOptions: {
        grid: {
          bottom: "12%",
        },
        legend: {
          icon: "rect",
          itemWidth: 9,
          itemHeight: 4,
          itemGap: 16,
          top: 20,
          right: 60,
          textStyle: {
            fontSize: 12,
            color: "#fff",
            fontFamily: "Microsoft YaHei",
          },
        },
        tooltip: {
          show: true,
          formatter: "{b} <br/>{a0} : {c0}<br/>{a1} : {c1}<br/> {a2} : {c2}%",
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: ["4月", "8月", "9月"],
          axisTick: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#FEFEFE",
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#203044",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#263649",
              width: 1,
              type: "dashed",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#FFFFFF",
              fontSize: 12,
            },
          },
        },
        series: [
          {
            name: "每月目标考核客诉件数",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 1,
            data: [98, 101, 109],
            itemStyle: {
              normal: {
                color: "#F9D935",
              },
            },
          },
          {
            name: "每月实际客诉件数",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 1,
            data: [65, 98, 107],
            itemStyle: {
              normal: {
                color: "#16D0FF",
              },
            },
          },
          {
            name: "客诉达成率",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 1,
            data: [151, 103, 102],
            itemStyle: {
              normal: {
                color: "#4EE28B",
              },
            },
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    // hui
    init() {
      this.queryQualitySgrade();
      this.queryQualitFgrade();
      this.setComplaintOptions();
      this.queryQualityThrough();
      this.qualityQrate();
      this.qualityConformrate("日", "recordDate");
    },
    /**
     * 工艺
     * @param name 描述信息
     */
    async qualityConformrate(type, typeValue) {
      const date = getSevenDays();
      const data = date.map((item, index) => {
        return {
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: item + " 23:57:36",
          remark: null,
          id: index,
          factoryName: "杭州顶益工厂",
          workshopName: null,
          lineName: null,
          type: "日",
          recordDate: item,
          month: null,
          year: null,
          coincidence: "0",
          coincidenceAll: getRangeRandomFloor(20, 22, 1),
          coincidenceRadio: getRangeRandomFloor(97, 99.28, 2),
        };
      });
      let x1 = data.map((item) => item[typeValue]);
      // let y1 = data.map((item) => item.coincidence);
      // let y2 = data.map((item) => item.coincidenceAll);
      // let max = Math.max(...y1, ...y2);
      this.gyOptions.xAxis[0].data = x1;
      // this.gyOptions.xAxis[1].data = x1;
      // this.gyOptions.xAxis[2].data = x1;
      // this.gyOptions.series[0].data = y1;
      // this.gyOptions.series[1].data = y2;
      // this.gyOptions.series[2].data = y2.map((item) => ({
      //   itemStyle: {
      //     decal: {
      //       dashArrayX: [20, 0],
      //       dashArrayY: [5, 2],
      //       rotation: -45,
      //     },
      //   },
      //   value: max + 200,
      // }));
      this.gyOptions.series[0].data = data.map((item) => item.coincidenceRadio);
      // this.gyOptions.series[4].data = y1;
      // this.gyOptions.series[5].data = data.map((item) => max / 75);
      // this.gyOptions.series[6].data = y2;
      // this.gyOptions.series[7].data = data.map((item) => max / 75);
      // }
    },
    /**
     * 不良率
     * @param name 描述信息
     */
    async qualityQrate() {
      const date = getSevenDays();
      const data = date.map((item, index) => {
        return {
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: item + " 23:57:36",
          remark: null,
          id: index,
          recordDate: item,
          factoryName: "杭州顶益工厂",
          workshopName: null,
          lineName: null,
          defect: getRangeRandom(45, 55),
          defectBudget: getRangeRandom(7600, 7700),
          defectRadio: getRangeRandomFloor(0.55, 0.65, 2),
          qualifiedRadio: "",
        };
      });
      // let { code, data } =
      //   (await qualityQrate({
      //     factoryName: this.query.factoryName,
      //     size: 7,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      // if (code === 200) {

      let x1 = data.map((item) => item.recordDate);
      let y1 = data.map((item) => item.defect);
      let y2 = data.map((item) => item.defectBudget);
      let max = Math.max(...y1, ...y2);
      this.jhOptions.xAxis[0].data = x1;
      this.jhOptions.xAxis[1].data = x1;
      this.jhOptions.xAxis[2].data = x1;
      // 改善次数
      this.jhOptions.series[0].data = y1;
      // 发现次数
      this.jhOptions.series[1].data = y2;
      this.jhOptions.series[2].data = y2.map((item) => ({
        itemStyle: {
          decal: {
            dashArrayX: [20, 0],
            dashArrayY: [5, 2],
            rotation: -45,
          },
        },
        value: max + 200,
      }));
      this.jhOptions.series[3].data = data.map((item) => item.defectRadio);
      this.jhOptions.series[4].data = y1;
      this.jhOptions.series[5].data = data.map((item) => max / 75);
      this.jhOptions.series[6].data = y2;
      this.jhOptions.series[7].data = data.map((item) => max / 75);
      // }
    },

    async setComplaintOptions() {
      const data = {
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: "2023-10-12 23:41:17",
        remark: null,
        id: 1,
        recordDate: null,
        factoryName: "杭州顶益工厂",
        workshopName: null,
        lineName: null,
        number: "643.7",
        production: "14757.73",
        rate: "95",
      };
      this.ksObj = data;
    },
    async queryQualitySgrade() {
      const menu = ["GIG红牛桶", "BIG香辣袋", "红牛桶", "番茄桶", "酸菜袋", "金汤肥牛桶"];
      let data = [];
      for (let index = 0; index < 12; index++) {
        const score = getRangeRandomFloor(97, 99);
        data.push({
          createBy: null,
          createTime: "2023-10-07 12:44:52",
          updateBy: null,
          updateTime: null,
          remark: null,
          id: index,
          factoryName: "杭州顶益工厂",
          workshopName: "",
          lineName: "",
          type: "0",
          productName: menu[Math.floor(Math.random() * 5)],
          score: score,
          grade: score > 98.5 ? "A+" : "A",
        });
      }
      this.marketGradeList = data;
    },
    async queryQualitFgrade() {
      let month = new Date().getMonth() + 1;
      let data = [];

      for (let index = 0; index < 12; index++) {
        const score = getRangeRandomFloor(96.6, 99);
        data.push({
          createBy: null,
          createTime: "2023-" + month + "-07 12:44:52",
          updateBy: null,
          updateTime: null,
          remark: null,
          id: index,
          factoryName: "杭州顶益工厂",
          workshopName: "",
          lineName: "",
          type: "1",
          productName: `${month}月`,
          score: score,
          grade: score > 98.5 ? "A+" : "A",
        });
        if (month >= 12) month = 1;
        else month++;
      }
      this.factoryGraderList = data;
      // let { code, data } =
      //   (await qualitFgrade({ factoryName: this.query.factoryName, size: 30 }).catch((err) => {
      //     err;
      //   })) || {};
      // if (code === 200) {
      // this.factoryGraderList = data;
      // }
    },
    async queryQualityThrough() {
      const data = {
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: "2023-10-20 18:56:10",
        remark: null,
        id: 1,
        recordDate: null,
        factoryName: "杭州顶益工厂",
        workshopName: null,
        lineName: null,
        throughRateDay: "99.3",
        productionDay: "20",
        rawProductionDay: "40",
        throughRateMonth: "99.3",
        productionMonth: "20",
        rawProductionMonth: "40",
        throughRateYear: "50",
        productionYear: "20",
        rawProductionYear: "400",
        qualifiedNumber: "6129866",
        produceNumber: "6151917",
        throughRate: "99.70",
      };
      let day = new Date();
      let dayRadio = (day.getHours() - 7) / 12;

      this.throughRate = data.throughRate;
      this.qualityList[0].value = (dayRadio * 300 * 99.7).toFixed(0);
      this.qualityList[1].value = (dayRadio * 30000).toFixed(0);

      // }
    },
  },
};
</script>

<style scoped lang="scss">
// jui
.quality-management {
  padding: 0 48px;
  margin: 60px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .value {
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;

    span:nth-child(2) {
      font-size: 42px;
      color: #fff;
    }

    .unit {
      font-size: 23px;
      font-family: Microsoft YaHei;
      color: #ffffff;
      opacity: 0.53;
    }

    img {
      position: absolute;
      z-index: -10;
      width: 100%;
    }
  }
}

.table,
.dev {
  height: calc(100% - 60px);
}

.th {
  background: url("~@/assets/images/th.png");
  background-repeat: repeat-x;
  // background-size: 100% 100%;
}

.no-num {
  border: 1px solid #ec954c;
  background-color: rgba(255, 127, 14, 0.35);
}

.consumer-con {
  height: 100%;
  .top {
    height: 55%;
  }
  .bottom {
    height: 45%;
    .title {
      margin-top: 20px;
      padding: 0px 20px;
      font-size: 16px;
      background-image: -webkit-linear-gradient(bottom, #dce0e4, #ccdae6, #dce0e4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .table {
      margin-top: -10px;
      .th {
        padding: 7px 0;
        background-image: none;
        background-repeat:no-repeat;
        background-color: #0f2531;
      }
      .tr {
        padding: 7px 0;
      }
    }
  }
}
</style>
